<template>
      <div class="classify">
        <div class="big_classify">
          <div v-for="(item, index) in big_classify" :key="index">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="`#${item.icon}`"></use>
            </svg>
            <span>{{item.name}}</span>
          </div>
        </div>
        <div class="small_classify">
          <div v-for="(item, index) in small_classify" :key="index">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="`#${item.icon}`"></use>
            </svg>
           <span>  {{ item.name }}</span>
          </div>
        </div>
    </div>
</template>

<script>
import { inject, toRefs } from '@vue/runtime-core'
export default {
  name:'Caterogy',
  setup(){
    let data = inject('data')
    return {
      ...toRefs(data)
    }
  }
}
</script>

<style lang="less" scoped>
.classify{
  margin-top: 10px;
  .big_classify{
    display: flex;
    padding: 5px 10px;
    div{
      flex: 1;
      height: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .icon{
        width: 50px;
        height: 50px;
      }
    }
  }
  .small_classify{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 10px;
    div{
      display: flex;
      width: 20%;
      height: 50px;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .icon{
        width: 30px;
        height: 30px;
      }
      span{
          font-size: 15px;
      }
    }
  }
}
</style>